import React,{Component} from 'react'
import {ScrollView,View,Text,StyleSheet,TouchableOpacity,TouchableNativeFeedback,PixelRatio} from 'react-native'
import { Button,PageModal,Datepicker,Longlist } from 'beeshell';
import BasePage from '../base/BasePage';
import Icon1 from 'react-native-vector-icons/FontAwesome5';
import Icon2 from 'react-native-vector-icons/AntDesign';
import { default as ListView } from '../components/CustomList/index'
import Sound from 'react-native-sound';

const pixHeight = 1 / PixelRatio.get();

export default class HomePage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            date : '2018-01-01',
            list:[
                {label:1},
                {label:2},
                {label:3},
                {label:4},
                {label:5},
            ],
        }
    };
    componentDidMount() {
        // this.refreshState(1);
    };

    _playSound = () => {
        console.log('start to play')
        const callback = (error, sound) => {
            console.log('start to go',error)
            if (error) {
                // Alert.alert('error', error.message);
                // setTestState(testInfo, component, 'fail');
                console.log('play error')
                return;
            }
            // setTestState(testInfo, component, 'playing');
            // Run optional pre-play callback
            // testInfo.onPrepared && testInfo.onPrepared(sound, component);
            sound.play(() => {
                // Success counts as getting to the end
                // setTestState(testInfo, component, 'win');
                // Release when it's done so we're not using up resources
                sound.release();
            });
        };
        const whoosh = new Sound('https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3',null, error => callback(error, whoosh));
        // const s = new Sound('https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3',null, (e) => {
        //         if (e) {
        //              console.log('播放失败');
        //             return;
        //         }
        //         s.play(() => s.release());
        //     });
        // console.log('go to play',whoosh)
        // sound.play(() => {
        //     console.log('its time ')
        // });
    }

    _jumpToShopList = () => {
        this.props.navigation.navigate("ShopList")
    }

    _onFetch = async (page = 1, startFetch, abortFetch) => {
        try {
            let pageLimit = 10;
            // await this.sleep(10);

            console.log(111,this.state.currentTab)
            // if(this.state.respData.length == 0) {
            // console.log(112,this.state.respData.length)
            // await this.loadData();
            // }
            console.log(222)
            let productList = this.state.list;
            console.log(333,productList)
            // productList.map((m) => {
            //     m.checked = false;
            // })
            // if(this.state.firstInit) {
            //     this.setState({currentTab:1,firstInit:false})
            // }
            console.log('[productList]',productList)
            startFetch(productList, pageLimit);
        } catch (err) {
            abortFetch(); //manually stop the refresh or pagination if it encounters network error
        }
    }

    _Separator = () => {
        return <View style={{height:pixHeight,backgroundColor:'#ddd',}}/>
    }
    _renderItem = () => {
        return (
            <View style={styles.listItem}>
                <View style={styles.itemLeft}>
                    <Text style={styles.LeftTitle}>微信支付订单—旺旺大礼包5斤装</Text>
                    <Text style={styles.LeftTime}>2月10日 14:20</Text>
                </View>
                <Text style={styles.rightNum}>+25.00</Text>
            </View>
        )
    }

    render() {
        return (
            <ScrollView contentContainerStyle={styles.contentContainer}>
                <View style={styles.homeTop}>
                    <View style={styles.topCount}>
                        <Text style={[styles.countText,commonStyle.themeColor]}>今日交易0笔，共计(元)</Text>
                        <Text style={[styles.countNum,commonStyle.themeColor]}>0.00</Text>
                    </View>
                    <View style={styles.topBt}>
                        <TouchableOpacity style={styles.btItem} onPress={this._jumpToShopList}>
                            <Icon1 name='store-alt' light size={14} color="#dda95e" /> 
                            <Text style={[commonStyle.themeColor,commonStyle.defaultFont]}> 店铺列表</Text>
                        </TouchableOpacity>
                        <View style={styles.btLine}></View>
                        <TouchableOpacity style={styles.btItem}>
                            <Icon1 name='chart-bar' light size={16} color="#dda95e" /> 
                            <Text style={[commonStyle.themeColor,commonStyle.defaultFont]} > 报表</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <TouchableOpacity onPress={this._playSound}>
                    <View style={styles.homeCustomer}>
                        <View style={styles.customerLeft}>
                            <Icon1 name='headset' light size={16} color="#dda95e" />
                            <Text style={[commonStyle.themeColor,commonStyle.titleFont]} > 在线客服</Text>
                        </View>
                        <Icon2 name='right' size={16} color="#dddddd" /> 
                    </View>
                </TouchableOpacity>
                
                <View style={styles.homeTitle}>
                    <TouchableOpacity
                         style={styles.titleDate}
                        onPress={() => {
                            this._pageModal.open();
                        }}>
                        <Text style={[{color:commonStyle.textBlockColor},commonStyle.titleFont]}>2019年2月 </Text>
                        <Icon2 name='caretdown' size={14} color="#999999" />
                    </TouchableOpacity>
                    <Text style={[commonStyle.themeColor,commonStyle.defaultFont]}>
                        收入￥25025.00，支出￥4586.00
                    </Text>
                </View>
                <ListView keyExtractor={(item, index) => `${index}`} separator={this._Separator}
                          renderItem={this._renderItem} onFetch={this._onFetch}/>
                <PageModal
                    ref={(c) => { this._pageModal = c; }}
                    title="选择日期"
                    cancelable={true}
                    cancelCallback={() => {
                    }}
                    confirmCallback={() => {
                    }}>
                        <Datepicker
                            startYear={2010}
                            numberOfYears={10}
                            date={this.state.date}
                            onChange={(data) => {
                                console.log(data);
                            }}
                        />
                </PageModal>
            </ScrollView>
        )
    }

}
const styles = StyleSheet.create({
    contentContainer:{
    },
    
    homeTop:{
        backgroundColor:'#f5f5f5',
        flex:1,
        paddingBottom:35,
    },
    topCount:{
        textAlign:'center',
        alignItems:'center',
        padding:20,
        backgroundColor:'#333740',
    },
    countText:{
        fontSize:16,
        marginTop:10,
    },
    countNum:{
        fontSize:40,
        marginTop:10,
        marginBottom:5,
    },
    topBt:{
        backgroundColor:'#3b3e45',
        padding:10,
        flexDirection:'row',
        justifyContent: 'space-around',
        
    },
    btItem:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'center',
        flex:1,
    },
    btLine:{
        width:1,
        height:20,
        backgroundColor:'#797c83',
    },
    homeCustomer:{
        margin:10,
        marginTop:-25,
        padding:15,
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-between',
        backgroundColor:'#fff',
        borderWidth:1,
        borderColor:'#eeeeee',
        borderRadius:30,
        shadowColor:'#999',
        shadowOffset:{width:5,height:5},
        shadowOpacity:0.5,
        flex:1,
    },
    customerLeft:{
        flexDirection:'row',
        alignItems:'center',
    },
    homeTitle:{
        padding:10,
        paddingLeft:15,
        paddingRight:15,
        flexDirection:'row',
        justifyContent: 'space-between',
        borderBottomWidth:1,
        borderBottomColor:'#ddd',
    },
    titleDate:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-between',
    },
    listItem:{
        padding:15,
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-between',
    },
    itemLeft:{

    },
    LeftTitle:{
        fontSize:16,
        color:commonStyle.textBlockColor,
    },
    leftTime:{
        color:commonStyle.textGrayColor,
    },
    rightNum:{
        fontSize:20,
        color:commonStyle.textGoldColor,
    },
    rightNum1:{
        fontSize:20,
        color:commonStyle.textBlockColor,
    },
})